<template>
    <div class="topBtn">
        <div class="topBtnLeft">
            <el-button @click="openCoverage" v-if="store.topBtn.coverage">
                <i class="fa fa-clone btnsImages"></i>
                图层
            </el-button>
            <el-button @click="signMaps" v-if="store.topBtn.sign">
                <i class="fa fa-thumb-tack btnsImages"></i>
                标记地图
            </el-button>
            <!-- <el-button>Primary</el-button> -->
            <div class="selectAddr" v-if="store.topBtn.search" :class="actttiveSelectAddr ? 'actttiveSelectAddr' : ''">
                <el-icon class="el-input__icon" @click="actttiveAddr(true)">
                    <Search />
                </el-icon>
                <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入要查询的地址" @select="handleSelect">
                    <template #default="{ item }">
                        <div class="value">
                            {{ item.name }}
                            <br />
                            <span class="link">{{ item.address }}</span>
                        </div>
                    </template>
                </el-autocomplete>
            </div>
            <!-- <el-button @click="openStatistics">
                <i class="fa fa-bar-chart btnsImages"></i>
                统计
            </el-button> -->
        </div>
        <div class="topBtnsRight">
            <el-button class="btnList" @click="$router.back()" v-if="store.topBtn.back"><i class="fa fa-mail-reply btnsImages"></i> 返回 </el-button>
            <el-dropdown trigger="click" @command="handleCommand" v-if="store.topBtn.tool">
                <el-button class="btnList">
                    <i class="fa fa-wrench btnsImages"></i>
                    矢量工具
                    <i class="fa fa-caret-down el-icon--right"></i>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="item in toolConfig" :key="item.name" :command="item">
                            <i :class="item.icon" class="itemIcon"></i>
                            {{ item.name }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
    <!-- 图层 -->
    <coverage v-show="store.coverage"></coverage>
    <!-- 矢量工具对话框 -->
    <vectorTool v-show="store.tool.toolDialog" :type="vectorToolType" :key="vectorToolType"></vectorTool>
    <!-- 标绘属性编辑 -->
    <editor v-if="store.property" :key="new Date().getTime()"></editor>
    <!-- tif偏移设置对话框 -->
    <!-- <tifOffSet></tifOffSet> -->
    <!-- 统计对话框 -->
    <el-dialog v-model="store.statisticsDialog" title="统计" width="500">
        <div class="">
            <div class="statisticsitem">
                <div class="itemTitle">线段数量：</div>
                100 条
            </div>
            <div class="statisticsitem">
                <div class="itemTitle">线段总长度：</div>
                3000 m
            </div>
            <div class="statisticsitem">
                <div class="itemTitle">多边形数量：</div>
                100 个
            </div>
            <div class="statisticsitem">
                <div class="itemTitle">多边形总面积：</div>
                3000 ㎡
            </div>
        </div>
        <!-- <template #footer>
            <div class="dialog-footer" style="text-align: center">
                <el-button color="#20a0ff" :dark="true" plain @click="store.statisticsDialog = false">关闭</el-button>
            </div>
        </template> -->
    </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import coverage from "@/views/coverage/coverage.vue";
import vectorTool from "@/views/tool/vectorTool.vue";
// import tifOffSet from "@/views/coverage/tifOffSet.vue";

import editor from "@/views/editor/index.vue";
import toolConfig from "@/config/tool.item.config";
import mars from "@/config/mars3d";

import { signMaps } from "@/utils/load";
import fn from "@/utils/tool/tool.function";
import { closeContextMenu } from "@/utils/global.function";
import { useStore } from "@/stores/index";
const store = useStore();
// 图层组件相关
const openCoverage = () => {
    store.coverage = true;
    // 关闭搜索框
    if (!state.value) {
        actttiveAddr(false);
    }
    closeContextMenu();
};
const vectorToolType = ref("");
// 矢量工具列表
const handleCommand = (command: string | number | object) => {
    console.log(command);
    if ((command as any).type == "print") {
        fn.tool((command as any).type);
    } else {
        vectorToolType.value = (command as any).type;
        closeContextMenu();
        store.tool.toolDialog = true;
        store.tool.toolData = command as any;
    }

    // fn.tool((command as any).type);
};
// poi搜索
const state = ref("");
const actttiveSelectAddr = ref(false);
const actttiveAddr = (show: boolean) => {
    actttiveSelectAddr.value = show;
};
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
    if (!queryString) return;
    const queryPoi = new mars.mars3d.query.GaodePOI({ key: ["9bcb1e0d9dca902457a23f5332d8a102"] });
    queryPoi.queryText({
        text: queryString,
        page: 0,
        count: 30,
        success: (res) => {
            cb(res.list);
        },
    });
};
// 选择列表后添加图层
const graphicLayer = new mars.mars3d.layer.GraphicLayer();
let graphic: any;
const handleSelect = (item: Record<string, any>) => {
    // 搜索框赋值
    state.value = item.name;
    if (graphic) {
        deletegraphic();
    }
    addgraphic(item);
    store.map.flyToPoint([item.x, item.y], { radius: 1500 });
};
// 添加搜索点标记
const addgraphic = (item: any) => {
    store.map.addLayer(graphicLayer);
    graphic = new mars.mars3d.graphic.BillboardEntity({
        position: [item.lng, item.lat],
        style: {
            image: "http://59.110.54.18/file/mapIcon/dian.png",
            scale: 0.4,
            horizontalOrigin: mars.Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: mars.Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true,
        },
    });
    graphicLayer.addGraphic(graphic);
    // 添加标记点信息
    graphicLayer.bindPopup(function (event: any) {
        const attr = event.graphic.attr || {};
        attr["地址"] = `${item.xzqh}${item.address}`;
        attr["电话"] = item.tel;
        attr["经度"] = item.lng;
        attr["纬度"] = item.lat;
        attr["备注"] = item.type;

        return mars.mars3d.Util.getTemplateHtml({
            title: item.name,
            template: "all",
            attr,
        });
    });
    bindLayerContextMenu();
};
// 绑定右击事件
const bindLayerContextMenu = () => {
    graphicLayer.bindContextMenu([
        {
            text: "删除标记点",
            show: (event) => {
                const graphic = event.graphic;
                if (!graphic || graphic.isDestroy) {
                    return false;
                } else {
                    return true;
                }
            },
            callback: (e) => {
                const graphic = e.graphic;
                if (!graphic) {
                    return;
                }
                const parent = graphic.parent; // 右击是编辑点时
                graphicLayer.removeGraphic(graphic);
                if (parent) {
                    graphicLayer.removeGraphic(parent);
                }
            },
        },
    ]);
};
// 删除搜索点标记
const deletegraphic = () => {
    graphicLayer.removeGraphic(graphic);
};
// 打开统计对话框
// const dialogVisible = ref(false);
// const openStatistics = () => {
//     dialogVisible.value = true;
// };
</script>
<style scoped lang="scss">
.value {
    line-height: 12px;
}
.link {
    font-size: 12px;
    color: #999999;
}
.statisticsitem {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .itemTitle {
        text-align-last: justify;
        width: 110px;
        margin-right: 10px;
        padding-left: 10px;
    }
}
</style>
